<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>tab标签切换样式</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="./res/layui/css/layui.css" media="all">
<script src="./js/jq3/jquery.min.js" charset="utf-8"></script>
<script src="./res/layui/layui.all.js" charset="utf-8"></script>
<style>

</style>
</head>
<body>
<div>
	<h1>此页是 tab标签样式展示</h1>
</div>
	<div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
		  <legend>动态操作Tab</legend>
		</fieldset>
		 
		<div class="layui-tab" lay-filter="demo" lay-allowclose="true">
		  <ul class="layui-tab-title">
		    <li class="layui-this" lay-id="11">网站设置</li>
		    <li lay-id="22">用户管理</li>
		    <li lay-id="33">权限分配</li>
		    <li lay-id="44">商品管理</li>
		    <li lay-id="55">订单管理</li>
		  </ul>
		  <div class="layui-tab-content">
		    <div class="layui-tab-item layui-show">内容1</div>
		    <div class="layui-tab-item">内容2</div>
		    <div class="layui-tab-item">内容3</div>
		    <div class="layui-tab-item">内容4</div>
		    <div class="layui-tab-item">内容5</div>
		  </div>
		</div>
		<div class="site-demo-button" style="margin-bottom: 0;">
		  <button class="layui-btn site-demo-active" data-type="tabAdd">新增Tab项</button>
		  <button class="layui-btn site-demo-active" data-type="tabDelete">删除：商品管理</button>
		  <button class="layui-btn site-demo-active" data-type="tabChange">切换到：用户管理</button>
		</div>
	</div>
	<div>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
		  <legend>带删除功能的Tab</legend>
		</fieldset>
		 
		<div class="layui-tab layui-tab-card" lay-allowclose="true">
		  <ul class="layui-tab-title">
		    <li class="layui-this">网站设置</li>
		    <li>用户基本管理</li>
		    <li>权限分配</li>
		    <li>商品管理</li>
		    <li>订单管理</li>
		  </ul>
		  <div class="layui-tab-content" style="height: 150px;">
		    <div class="layui-tab-item layui-show">
		      1. 
		    </div>
		    <div class="layui-tab-item">2</div>
		    <div class="layui-tab-item">3</div>
		    <div class="layui-tab-item">4</div>
		    <div class="layui-tab-item">5</div>
		    <div class="layui-tab-item">6</div>
		  </div>
		</div>             
	</div>
<script>
	$(function(){
	    layui.use(['layer', 'form', 'table', 'util'], function () {
	    	$ = layui.jquery,
		  	element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
			var active = {
				tabAdd: function(){
			      //新增一个Tab项
			      element.tabAdd('demo', {
			        title: '新选项'+ (Math.random()*1000|0) //用于演示
			        ,content: '内容'+ (Math.random()*1000|0)
			        ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
			      })
			    }
			    ,tabDelete: function(othis){
			      //删除指定Tab项
			      element.tabDelete('demo', '44'); //删除：“商品管理”
			      
			      
			      othis.addClass('layui-btn-disabled');
			    }
			    ,tabChange: function(){
			      //切换到指定Tab项
			      element.tabChange('demo', '22'); //切换到：用户管理
			    }
			};
			$(".site-demo-active").on('click',function(){//table 标签事件捕获
			  	var othis = $(this), type = $(this).data('type');
			    active[type] ? active[type].call(this, othis) : '';
			  });
			});
	});	
</script>
<body>
</html>
